<template>
	<section>
		<headers txt="我的推广"></headers>
		<a href="/ownAll/AddMember" class="h_ sz70 hued44">
			+
		</a>
		<div class="pud20">
			<form class="w75 pud20 plr30 flexs" action="#" v-on:submit.prevent="search">
				<label for="sear" class="si mr30 ml20"></label>
				<input id="sear" v-model="sear" type="search" class="sz30 flex1" placeholder="输入会员账号/手机号" @keyup="search" />
			</form>
		</div>
		<ul class="wallfff" v-if="extensinfo" v-infinite-scroll="extens" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
			<li v-for="item in extensinfo">
				<router-link :to="{path:'/ownAll/team',query:{MembersID:item.Members_ID}}" class="p30 bbtm sz30 hue333 flex_between">
					<span>{{item.Members_Name}}</span>
					<span>{{item.Members_Phone}}</span>
				</router-link>
			</li>
		</ul>
		<p v-else class="centre mu50">没有信息</p>
		<p class="centre pud30" v-if="nones">没有更多了</p>
	</section>
</template>

<script>
	import { Toast } from 'mint-ui';
	import { Indicator } from 'mint-ui';
	import { InfiniteScroll } from 'mint-ui';

	export default {
		data() {
			return {
				extensinfo: [],
				sear: "",
				times: null, // 延时500ms执行模糊查询
				PageIndex: 1,
				PageCount: 1,
				nones: false,
			}
		},
		created() {

		},
		methods: {
			extens: function(likes) {
				let v = this;
				likes !== undefined && (v.PageIndex = 1, v.extensinfo = [], v.nones = false); // 搜索查询重置页码和数据
				if(v.PageIndex <= v.PageCount) {
					let data = {
						"MembersID": sessionStorage.MembersID,
						"PageIndex": v.PageIndex++
					};
					likes && (data.LikeVar = likes); // 有搜索值就添加模糊查询

					Indicator.open();
					v.$http.get("/WorkMembersIntro/V1.0/GetIntroByMembersID", {
						params: data
					}).then((res) => {
						Indicator.close();

						let resdata = res.data.Return_Data.PageData;
						if(!resdata || !resdata.length) {
							v.extensinfo = null;
							return false;
						}
						resdata.forEach(function(item) {
							v.extensinfo.push(item);
						});
						v.PageCount = res.data.Return_Data.PageCount;

					}).catch((err) => {
						Indicator.close();
					});
				}
				//				else {
				//					v.nones = true;
				//				}
			},
			search: function(e) {
				let v = this;
				e.preventDefault();
				clearTimeout(this.times);
				this.times = setTimeout(function() {
					v.extens(v.sear)
				}, 500)
			}
		}
	}
</script>

<style scoped>
	form {
		margin: 0 auto;
		border: 1px solid #999999;
		border-radius: 0.6666666666rem;
	}
	
	input {
		background: none;
	}
	
	input:focus {
		outline: none;
	}
	
	.si {
		display: block;
		height: 0.5333333333rem;
		width: 0.5333333333rem;
		background: url(../../assets/Other/search@3x.png) no-repeat;
		background-size: 100% 100%;
	}
</style>